<template>
	<div style="background-color: #ededed;">
		<div style="width: 100%;background-color: #fff;height: auto;">
			<div style="width: 1140px;min-width: 1140px;height: 81px;margin: auto;">
				<div style="float: left;    height: 81px;line-height: 81px;">
					<img src="../images/dialogImg1.png" alt=""><img src="../images/logoTitle.png"/>
				</div>
				
			</div>
		</div>
		<div style="width: 100%;min-width: 1700px;background-color: #ededed;height: 750px;">
			<div class="register">
				<div style="display: inline-block;width: 400px;height: 750px;float: left;">
					<img src="../images/registerImg.png" style="width: 400px;height: 100%;" alt="">
				</div>
				<div style="display: inline-block;float: left;width: 740px;margin-top: 30px;">
					<div style="color: #150e52;font-size: 33px;margin-bottom: 30px;text-align: center;">在线注册</div>
					<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="100px" class="registerForm">
						<el-form-item label="帐号：" prop="userName">
							 <label slot="label">帐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
						  <el-input type="text" v-model="registerForm.userName" autocomplete="off" placeholder="输入帐号"></el-input>
						</el-form-item>
						<el-form-item label="邮箱：" prop="email">
							 <label slot="label">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
						  <el-input type="text" v-model="registerForm.email" autocomplete="off" placeholder="输入邮箱"></el-input>
						</el-form-item>
					  <el-form-item label="密码" prop="password">
						  <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
					    <el-input show-password type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码为6-20个字符"></el-input>
					  </el-form-item>
					  <el-form-item label="确认密码：" prop="checkPass">
					    <el-input show-password type="password" v-model="registerForm.checkPass" autocomplete="off"   placeholder="请重复输入密码"></el-input>
					  </el-form-item>
					 <el-form-item label="手机号码：" prop="phoneNumber">
					 	 <!-- <label slot="label">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label> -->
					   <el-input type="text" v-model="registerForm.phoneNumber" autocomplete="off" placeholder="请输入手机号码"></el-input>
					 </el-form-item>
					 <el-form-item label="企业名称：" prop="firmName">
					 	 <!-- <label slot="label">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label> -->
					   <el-input type="text" v-model="registerForm.firmName" autocomplete="off" placeholder="填写营业执照上注册的企业"></el-input>
					 </el-form-item>
					 <div style="text-align: center;margin-top: 50px;">
						 <el-checkbox v-model="registerForm.checked">我已阅读并同意</el-checkbox>
						 <span class="yhxy" style="color: #150e52;font-size: 23px;cursor: pointer;">《用户服务协议》</span>
					 </div>
					 
					  <el-form-item style="text-align: center;" class="btn">
					    <el-button  @click="submitForm('registerForm')" >立即注册</el-button>
					    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
					  </el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainBottom,
		  
	   },
	   data(){
		   var validatePass = (rule, value, callback) => {
		           if (value === '') {
		             callback(new Error('请输入密码'));
		           } else {
					   if (value.length<6||value.length>20) {
					   	callback(new Error('请重新输入密码，密码不合规'));  
					   	// return;  
					   }else{
						   callback();
					   } 
		            //  if (this.registerForm.checkPass !== '') {
		            //    this.$refs.registerForm.validateField('checkPass');
		            //  }
		             
		           }
		         };
		         var validatePass2 = (rule, value, callback) => {
		           if (value === '') {
		             callback(new Error('请再次输入密码'));
		           } else if (value !== this.registerForm.password) {
		             callback(new Error('两次输入密码不一致!'));
		           } else {
		             callback();
		           }
		         };
		   return{
			   pageSize: 16,
			   totalCount: 1,
			   totalPageSize:1,
			   pageInputNum: '',
			   currentPage: 1,
			   total:5,
			   typeOptions: [{
			             value: '选项1',
			             label: '展商'
			           }, {
			             value: '选项2',
			             label: '展位名'
			           }, {
			             value: '选项3',
			             label: '资讯'
			           }, ],
				searchType:'',
				 registerForm: {
					userName:'',
					email:'',
				    password: '',
					phoneNumber:'',
					firmName:'',
					checked:'',
					checkPass: '',
				},
				
				rules: {
						  userName: [{
						    required: true,
						    message: "用户名不能为空",
						    trigger: "blur"
						  }],
				          password: [
				            { validator: validatePass, trigger: 'blur' }
				          ],
				          checkPass: [
				            { validator: validatePass2, trigger: 'blur' }
				          ],
				          phoneNumber: [{
				            required: true,
				            message: "手机号不能为空",
				            trigger: "blur"
				          }, {
				            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
				            message: "请输入正确的手机号码",
				            trigger: "blur"
				          }],
						  firmName: [{
						    required: true,
						    message: "企业名称不能为空",
						    trigger: "blur"
						  }],
						  email: [{
						    required: false,
						    // message: "电子信箱不能为空",
						    trigger: "blur"
						  }, {
						    validator: function(rule, value, callback) {
						  								if (!value) {
						  								   return callback();
						  								}
						      if (
						        /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
						          value
						        ) == false
						      ) {
						        callback(new Error("邮箱格式错误"));
						      } else {
						  								callback()
						      }
						    },
						    trigger: "blur"
						  }]
				        }
			   };
			},
		created(){
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange() {
			   this.contentPerPage.pn=this.currentPage;
			   contentList(this.contentPerPage).then(response => {
			           this.contentPerPageList = response.data;
			         });
			},
			changeFirstPage(){
				this.currentPage=1;
				this.handleCurrentChange();
			},
			changeLastPage(){
				this.currentPage=this.totalPageSize;
				this.handleCurrentChange();
			},
			getTotalPageSize(){
				this.totalPageSize=this.totalCount/this.pageSize
			},
			changePage(){
				this.currentPage=this.pageInputNum;
				this.handleCurrentChange();
			},
			async submitForm() {
				if (!this.registerForm.checked) {
					alert('请仔细阅读《用户服务协议》后勾选我已阅读并同意!');  
					return;  
				}
				if (!this.registerForm.userName) {
					alert('用户或者密码不能为空!');  
					return;  
				}
				if (!this.registerForm.password) {  
					alert('用户或者密码不能为空!');  
					return;  
				}  
				if (!this.registerForm.phoneNumber) {
					alert('手机号码不能为空!');  
					return;  
				}   
				if (!this.registerForm.firmName) {
					alert('企业名称不能为空!');  
					return;  
				}
				if (this.registerForm.password.length<6||this.registerForm.password.length>20) {
					alert('请重新输入密码，密码不合规!');  
					return;  
				} 
				if (this.registerForm.password !== this.registerForm.checkPass) {
					alert('两次输入密码不一致!');  
					return;  
				}
				try {  
					const response = await axios.post('https://zha.heavenk.com/prod-api/web/user/add', this.registerForm);  
					// 处理响应数据  
					alert(response.data.msg);
                    if (response.data.msg=='注册成功') {
                        this.$router.push({ path: '/index' });  
                    }
					// 可以根据需要更新组件状态或执行其他操作  
				} catch (error) {  
					// 处理错误  
					console.error(error);
					  alert(error)
				} 
			},
			resetForm(formName) {
			this.$refs[formName].resetFields();
			}
		},
		mounted(){
		}
		}
</script>

<style>
	.register{
		width: 1140px;
		min-width: 1140px;
		height: 750px;
		margin: auto;
		margin-top: 33px;
		background-color: #fff;
	}
	.registerForm .el-form-item__label{
		color: #150e52;
		font-size: 23px;
		width: 180px !important;
		height: 57px;
		line-height: 57px;
	}
	.registerForm .el-input__inner{
		width: 500px;
		height: 57px;
		border: 2px solid #c5c3d4;
		border-radius: 0px !important;
		color: #150e52;
		font-size: 21px;
	}
	.registerForm .el-input{
		width: 500px;
		height: 57px;
		line-height: 57px;
	}
	.registerForm  .el-input__inner::placeholder {
	        color: #c5c3d4;
	    }
	     /* 谷歌 */
	    .registerForm  .el-input__inner::-webkit-input-placeholder {
	        color: #c5c3d4;
	    }
	     /* 火狐 */
	   .registerForm  .el-input__inner:-moz-placeholder {
	        color: #c5c3d4;
	    }
	     /*ie*/
	   .registerForm  .el-input__inner:-ms-input-placeholder {
	        color: #c5c3d4;
	    }
		.registerForm .el-checkbox__label{
			color: #150e52 !important;
			font-size: 23px;
		}
		.registerForm .el-checkbox__inner{
			    border: 2px solid #150e52;
			    width: 17px;
			    height: 17px;
			    top: -3px;
		}
		.registerForm .el-checkbox__input.is-checked .el-checkbox__inner{
			background-color: #150e52; 
			border-color: #150e52;
		}
		.registerForm .el-checkbox__input.is-focus .el-checkbox__inner{
			/* background-color: #150e52; */
			border-color: #150e52;
		}
		.registerForm .el-button.el-button--default{
			color: #fff;
			background-color: #150e52;
			width: 390px;height: 65px;
			border-radius: 0px;
			font-size: 23px;
			margin-top: 24px;
		}
		.btn .el-form-item__content{
			margin-left: 0px !important;
		}
		.registerForm .el-form-item__error{
			margin-left: 81px;
		}
		.yhxy:hover{
			color: #c5c3d4 !important;
		}
		.registerForm .el-form-item--feedback .el-input__validateIcon,
		.registerForm .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
		    display: none;
		}
</style>